<template>
    <div>
        <el-container>
            <el-header>
                <div  class="header">
                  <el-row>
                      <el-col :span=4 class="headerCol">
                          <el-image :src="require('../../../img/littleIcon/doctorLogo.png')"></el-image>
                      </el-col>
                      
                      <el-col :span=12 class="headerSex">
                        <el-steps :active="2" finish-status="success" simple='true'>
                            <el-step title="选择疫苗机构" icon="el-icon-edit"></el-step>
                            <el-step title="查看疫苗机构" icon="el-icon-edit"></el-step>
                            <el-step title="预约疫苗" icon="el-icon-edit"></el-step>
                        </el-steps>
                      </el-col>
                  </el-row>                  
              </div>
            </el-header>
            <el-main>
                <el-row class="text-row">
                  <el-col :span='24'>
                    <h3>
                        {{this.$store.state.vaccinItem.deptName}}
                        <label style="color:red">&nbsp;&nbsp;{{this.$store.state.vaccinItem.setCount}}&nbsp;针</label>
                    </h3>
                    <span>{{this.$store.state.vaccinItem.deptAddress}}</span>&nbsp;&nbsp;<br><br>
                    <span>当天总数：{{this.$store.state.vaccinItem.tVaccinNoteDept.daySumCount}}</span><br><br>
                    <span>已预约：{{this.$store.state.vaccinItem.tVaccinNoteDept.orderCount}}</span>
                  </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                  <el-col :span=6>
                      <el-form :label-position="right" label-width="120px" ref="vaccinList" :model="vaccinList" :rules="rules">
                        <el-form-item label="接种人：" prop="vaccinName">
                            <el-input v-model="vaccinList.vaccinName" placeholder="体检人"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="性别：">
                            <el-radio v-model="vaccinList.sex" label="1">男</el-radio>
                            <el-radio v-model="vaccinList.sex" label="2">女</el-radio>
                        </el-form-item> -->
                        <el-form-item label="手机号：" prop="vaccinPhone">
                            <el-input v-model="vaccinList.vaccinPhone" placeholder="手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号：" prop="vaccinIdCard">
                            <el-input v-model="vaccinList.vaccinIdCard" placeholder="身份证号"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="出生日期：">
                            <el-input type="date" v-model="vaccinList.birthday" placeholder="出生日期"></el-input>
                        </el-form-item> -->
                        <el-form-item label="体检日期选择：" prop="vaccinDate">
                            <!-- <el-input type="datetime"  v-model="vaccinList.tOrder.orderdate"></el-input> -->
                            <el-date-picker
                            v-model="vaccinList.vaccinDate"
                            type="datetime"
                            placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <!-- <el-form-item>
                            <el-input type="hidden"  v-model="vaccinList.setmealId"></el-input>
                        </el-form-item> -->
                        <el-form-item>
                            <el-button type="primary" @click="orderSubmit">确认预约</el-button>
                        </el-form-item>
                      </el-form>
                  </el-col>
              </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        var checkOrderDate=(rule,value,callback)=>{
            value = this.vaccinList.vaccinDate
            var date = new Date();
            if(!value){
                callback(new Error('请选择日期'))
            }else if(value<=date){
                callback(new Error('预约时间必须>=当前时间'))
            }else{
                callback()
            }
        }
        var checkIdcard1=(rule,value,callback)=>{
            axios.get("/vaccinNote/queryByIdCard1?vaccinIdCard="+value)
            .then(res => {
                if(res.data){
                    callback(new Error(('该用户已经接种完成，不能继续预约疫苗')))
                }else{
                    callback()
                }                    
            })
            .catch(err => {
                console.error(err); 
            })
        }
        /* var checkIdcard2=(rule,value,callback)=>{
            axios.get("/vaccinNote/queryByIdCard2?vaccinIdCard="+value)
            .then(res => {
                if(res.data){
                    callback(new Error(('该用户已经在别的机构预约过，不能在贵机构预约')))
                }else{
                    callback()
                }                    
            })
            .catch(err => {
                console.error(err); 
            })
        } */
        return{
            vaccinList:{
                vaccinName:'',
                vaccinPhone:'',
                vaccinIdCard:'',
                vaccinDate:'',
                vaccinDept:this.$store.state.vaccinItem.id
            },            
            rules:{
                vaccinName:[
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 12, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                vaccinPhone:[
                    {required: true,message:'请输入体检人或者负责人的手机号码',trigger: 'blur'},
                    {min:11,max:11,message:'手机号码为11位',trigger:'blur'}
                ],
                vaccinIdCard:[
                    {required: true,message:'请输入体检人的身份证号码',trigger: 'blur'},
                    {min:18,max:18,message:'身份证号码为18位',trigger: 'blur'},
                    {required: true,validator: checkIdcard1,trigger: 'blur'},
                    // {required: true,validator: checkIdcard2,trigger: 'blur'}
                ],  
                vaccinDate:[
                    // {required: true,message:'请输入预约时间',trigger: 'blur'},
                    {required: true,validator: checkOrderDate,trigger: ['blur', 'change']}
                ]
            }
        }
    },
    methods:{
        orderSubmit(){
            this.$refs['vaccinList'].validate(valid=>{
                if(valid){
                    axios.post("/vaccinNote/insertSelective",{vaccinNote:this.vaccinList})
                    .then(res => {
                        console.log(res.data)
                        this.$message({
                            message: '预约成功！',
                            type: 'success'
                        });
                        this.$router.push("/vaccinType");
                    })
                    .catch(err => {
                        console.log('添加失败')
                        console.error(err); 
                    })
                }else{
                    alert('带*号的，不能为空')
                }
            })     
        }
    }
}
</script>

<style scoped>
    .headerSex{
        margin-top:20px;
    }
    .headerCol{
        margin-top: 10px;
        text-align: left;
    }
    /* .headerCol{
        margin-top: 10px;
        text-align: left;
    } */
    .text-row{
        text-align: left;
        cursor: pointer;
    }
</style>